<template>
  <div class="chart-content-wrapper">
    <TopFilter :title="reportName">
      <SingleCheck @singleCheck="singleCheck"></SingleCheck>
      <single-list-filter-without-cb :filter="filter" :type="'years'"
                                     @confirmSingleSelect="chooseYear">
      </single-list-filter-without-cb>
      <double-check-filter @confirmDoubleSelect="planAreaSelect" defaultText="统筹区" :filter="filter" type="planArea"></double-check-filter>
      <double-check-filter @confirmDoubleSelect="confirmDoubleSelect" defaultText="费用类型" :filter="filter" type="freeType"></double-check-filter>
    </TopFilter>
    <div id="myChart4" class="chart-type1"  style="height:70%"></div>
    <Summarize :showSummarizeText="conclusion"></Summarize>
  </div>
</template>

<script>
  import {getChartItem4} from "../../../api/api";
  import SingleListFilter from '../../last/filter/single-list-filter.vue'
  import DoubleCheckFilter from '../../last/filter/double-check-filter.vue'
  import TopFilter from '../../last/filter/top-filter1.vue'
  import Summarize from '../../last/summarize/summarize.vue'
  import SingleCheck from '../../last/filter/single-check'
  import SingleListFilterWithoutCb from '../../last/filter/single-list-filter-without-checkbox'
  export default {
    name: 'chart4',
    props:['isChange'],
    components:{
      SingleListFilter,
      DoubleCheckFilter,
      TopFilter,
      Summarize,
      SingleListFilterWithoutCb,
      SingleCheck
    },
    data () {
      return {
        filter: JSON.parse(JSON.stringify(require('../../cnst/allInputs.json').data)),
        conclusion:'',
        areaCode: null,
        countAvgFlag: "1",
        medicalCategory: null,
        queryYear:'2018',
        /*reportName:'患者人均/次均医药费用增长比较分析TOP6'*/
        reportName:'患者人均/次均医药费用'
      }
    },
    mounted(){
      // 基于准备好的dom，初始化echarts实例
      this.myChart = this.$echarts.init(document.getElementById('myChart4') ,null, {renderer: 'canvas'})
      this.myChart.showLoading();
      this.getData();
    },
    watch:{
      isChange(){
        setTimeout(()=>{
          this.myChart.resize();
        },101)
      }
    },
    methods:{
      getData(){
        getChartItem4('report/cntExpGrowthCompareAnalysis',this.areaCode, this.countAvgFlag, this.medicalCategory, this.queryYear).then(response=>{
          let json = response.data;
          if(response.code===0){
            this.myChart.hideLoading();
           /* this.reportName = json.reportName;*/
            this.drawLine(json)
          }
        })
      },
      avg(arry){
        let sum=0;
        let len=arry.length;
        for(let i=0;i<len;i++){
          sum+=arry[i];
        }
        let d = parseInt((sum/len)*100)/100;
        return d;
      },
      singleCheck(type){
        //选择均次人次
        this.countAvgFlag = type;
        this.getData();
      },
      chooseYear(year){
        //选择年份后执行事件
        this.queryYear = year;
        this.getData();
      },
      planAreaSelect(filter){
        //统筹区选择
        this.areaCode = filter.jion(',');
        this.getData();
      },
      confirmDoubleSelect(filter){
        //选择费用类型
        this.medicalCategory = filter.join(',');
        this.getData();
      },
      drawLine(json){
        let avg = this.avg(json.institutionGrowthRateList)
        this.conclusion = json.reportConclusion;
        // 绘制图表
        this.myChart.setOption({
          // Make gradient line here
          title : {
            subtext: '单位：万元',
            left:'4%',
            top:'7%',
            x:'left',
            subtextStyle:{
              color:'#fff'
            }
          },
          grid:[//此参数可在一个dom中划分多个图表 可设置不同图表的位置
            {
              width: '20%',
              left:'70%',
              height:'78%',
              top:'17%',
              tooltip: {
                formatter: "{b}</br>{c}%" //给当前坐标系添加弹窗
              }
            },
            {
              width: '45%',
              left:'20%',
              height:'80%',
              top:'14%',
              tooltip: {
                formatter: "{b}</br>{c}万元" //给当前坐标系添加弹窗
              }
            }
          ],
          legend: {
            left:'10%',
            top: '3%',
            icon:'rect',
            itemWidth: 30,
            itemHeight: 10,
            itemGap: 10,
            data:[`${this.queryYear}年`,`${this.queryYear-1}年`],
            textStyle:{
              color:'#fff'
            }
          },
          tooltip:{
            /*trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }*/
          },
          /*tooltip: [{
            trigger: 'none',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'line'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },{
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          }],*/
          xAxis: [{
            type:'value',
            /* show:true,*/
            splitLine: {
              show: false
            },
            position:'top',
            /*minInterval:5,*/
            /*max:'dataMax',*/
            splitNumber:2,
            axisLine:{
              show:false
            },
            axisLabel : {
              formatter: '{value}',
              textStyle: {
                color: '#fff'
              }
            },
            axisTick:{
              show:false
            }

          }, {
            type:'value',
            splitLine: {show: false},
            gridIndex: 1,
            axisLine:{
              show:false
            },
            axisLabel : {
              formatter: '{value}',
              textStyle: {
                color: '#fff'
              }
            },
            axisTick:{
              show:false
            }
          }],
          yAxis: [{
            data: json.medInstitutionList,
            splitLine: {
              show: false
            },
            axisLine:{
              show:true,//显示y轴坐标线并设置为虚线
              lineStyle:{
                lineStyle:{
                  type:'solid',
                  color:'#2a4565'
                }
              }
            },
            axisTick:{
              show:false //不显示y轴坐标的刻度
            },
            axisLabel:{
              show:false //不显示y轴坐标数值
            }
          }, {
            data: json.medInstitutionList,
            gridIndex: 1,
            axisLine:{ //y轴的横线是否显示
              show:true,
              lineStyle:{
                color:'#2a4565'
              }
            },
            axisLabel : {
              formatter: '{value}',
              textStyle: {
                color: '#fff'
              }
            },
            axisTick:{ //y轴的刻度短竖线是否显示
              show:false
            }
          }],
          visualMap: [{
            show: true,
            dimension: 0,
            seriesIndex: 0,
            left: '40%',
            top: '3%',
            itemWidth:10,
            itemHeight:10,
            orient:"horizontal",
            textStyle:{
              color:'#fff'
            },
            pieces:[
              {
                max: avg,
                color: '#67ffdb',
                symbol:'circle',
                label: '增长率（低于平均值）',
              }, {
                min: avg,
                color: '#2b9ff6',
                symbol:'circle',
                label: '增长率（高于平均值）'
              }
            ],
          }],
          series: [{
            type: 'scatter',
            showSymbol: true,
            data: json.institutionGrowthRateList,
            symbolSize: 10,
            label:{
              show:true,
              position:'right',
              formatter:'{c}%',
              color:'#fff'
            },
            markLine:{
              label:{
                position: 'start',
                formatter: '平均增长率{c}%',
                color:'#fff'
              },
              symbol:'none',
              data : [
                {
                  type : 'average',
                  name: '平均增长率',
                  symbol: 'none',//设置平均线的头部没样式
                }
              ],
              lineStyle: {
                color:'#ff6a93'
              }
            }
          }, {
            type: 'bar',
            showSymbol: false,
            name: `${this.queryYear}年`,
            itemStyle:{
              color:'#ff6a93'
            },
            data: json.currYearMedTotalFeeList,
            label:{
              show:true,
              position:'right',
              formatter:'{c}万元',
              color:'#fff'
            },
            barWidth: '40%',
            xAxisIndex: 1,
            yAxisIndex: 1
          },{
            type: 'bar',
            name:`${this.queryYear-1}年`,//此值与legend图例对应
            itemStyle:{
              color:'#ffd66a'
            },
            label:{
              show:true,
              position:'right',
              formatter:'{c}万元',
              color:'#fff'
            },
            showSymbol: false,
            data: json.lastYearMedTotalFeeList,
            barWidth: '40%',
            xAxisIndex: 1,
            yAxisIndex: 1
          }]
        });
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
